<template>
  <div class="ing">
    <!-- 泊寓ING -->
    <van-nav-bar
      title="泊寓ING"
      left-arrow
      @click-left="onClickLeft"
      class="bar"
    />
    <div class="top">
      <div
        @click="ingstory(item.boyu_gid)"
        v-for="(item, index) of boyu_ing"
        :key="index"
        class="ing_div"
      >
        <div class="img-items">
          <img :src="item.boyu_gimg" />
        </div>
        <p>{{ item.boyu_gtitle }}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      boyu_ing: [],
    };
  },
  mounted() {
    this.axios.get("/ings").then((res) => {
      this.boyu_ing = res.data.results;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.push("/find");
    },
    ingstory(kw) {
      this.$router.push({
        path: "/ingstory",
        query: {
          gid: kw,
        },
      });
    },
  },
};
</script>
<style scoped>
.ing {
  padding-left: 15px;
  padding-right: 15px;
}
.bar {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
}
.top {
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ing_div {
  flex: 0 0 31%;
  width: 117px;
  border-radius: 5px;
  text-align: center;
}
.img-items img {
  margin:0 auto;
  width: 100%;
  height: 140px;
  border: 1px solid #aaa;
  border-radius: 2px;
  border-radius: 5px;
}
</style>